<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Person List</title>
</head>
<body>
<div id="title">查询结果、总数</div>
<div id="list">数据列表</div>
</body>
<script src="../js/jquery.3.2.1.min.js"></script>
<script>
    function listAllPersonOrderByUsername() {
        $.ajax({
            type: 'get',
            url: '/hello/listAllPersonOrderByUsername',//uri，后台
            // data: {id: id},//json格式的数据
            dataType: 'json',
            async: true,//是否异步，默认为true，可不写，如为false，前端会等url请求完毕才能执行其它任务
            success: function (data) {//回调函数，调用执行成功后的回调函数
                // 如果调用成功，更新页面上的元素
                document.getElementById('title').textContent = `查询结果、总数: ${data.total}`;
                const listDiv = document.getElementById('list');
                listDiv.innerHTML = '数据列表';  // 清空现有的列表

                // 将每个人的信息添加到列表中
                data.data.forEach(person => {
                    const personDiv = document.createElement('div');
                    personDiv.textContent = `ID：${person.id}，名称: ${person.name}，备注：${person.remark}，用户名: ${person.username}, 密码：${person.password}，创建人：${person.creatorid}，更新人：${person.updaterid}，创建时间：${person.createtime}，更新时间：${person.updatetime}`;
                    listDiv.appendChild(personDiv);
                });
            },
            error: function (xhr, textStatus, errorThrown) {//回调函数，调用执行失败后的回调函数
                document.getElementById('title').textContent = '查询失败';
                document.getElementById('list').textContent = `错误: ${error.message}`;
                console.log(xhr);
                console.log(textStatus);
                console.log(errorThrown);
            }
        });
    }

    // 页面加载完毕后自动执行查询
    document.addEventListener('DOMContentLoaded', listAllPersonOrderByUsername);
</script>
</html>